<template>
  <div class="page luckdraw-qa">
    <div class="list-container">
      <div class="list" v-for="(item, i) in qaList" :key="i">
        <div class="title">{{item.title}}</div>
        <div class="content">{{item.context}}</div>
      </div>
    </div>
    <div class="kefu">
      <div class="kefu-inner">
        <m-button text="仍有问题？联系客服" openType="contact"></m-button>
      </div>
    </div>
  </div>
</template>

<script>
import MButton from 'comp/m-button'

export default {
  components: {
    MButton,
  },
  data () {
    return {
      qaList: []
    }
  },
  async mounted () {
    const ret = await this.$store.dispatch('getQaList')
    this.qaList = ret.list
  },
}
</script>

<style lang="less" scoped>
.luckdraw-qa {
  .list-container {
    padding-bottom: 126rpx;
    .list {
      margin-bottom: 20rpx;
      padding: 40rpx 30rpx;
      background-color: #fff;
      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #000;
      }
      .content {
        font-size: 32rpx;
        color: #777;
        padding-top: 24rpx;
      }
    }
  }
  .kefu {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 126rpx;
    background-color: #fff;
    border-top: 1rpx solid #ddd;
    &-inner {
      padding: 10px 10px;
    }
  }
}
</style>
